import React, { useEffect, useState } from 'react'
import '../style/integral.css'
import icon from '../yjr_image/钱币.png'
import { Tabs } from 'antd-mobile'
import { getType } from '../../../api/yjr/yjr_api'
import Tab from './Tabs'
import { NavBar, Space } from 'antd-mobile'

function IntegralShop() {
  interface TabData {
    _id: string,
    title: string
  }

  const [tabData, setTabData] = useState<TabData[]>([])

  const getTabData = async () => {
    const res = await getType()
    setTabData(res.data.typeData)
  }

  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        <img src={icon} style={{ width: '2.4rem', height: '2.4rem' }} />
      </Space>
    </div>
  )

  const back = () => {
    window.history.back()
    sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
  }

  useEffect(() => {
    getTabData()
  }, [])

  return (
    <div className='integralShop'>
      <div className='header'>
        <NavBar right={right} onBack={back}>
          积分商城
        </NavBar>
      </div>
      <div className='top-tabbar'>
        <Tabs defaultActiveKey='67ac3b84c4cce6aa6311bd6e' className='tops' >
          {
            tabData.map((item: TabData) => {
              return (
                <Tabs.Tab title={item.title} key={item._id}>
                  <Tab item={item} />
                </Tabs.Tab>
              )
            })
          }
        </Tabs>
      </div>
    </div>
  )
}

export default React.memo(IntegralShop)